<script setup lang='ts'>
defineOptions({ name: 'BaseCheckbox' })
interface Props {
  checked: boolean
  label?: string
  wrapperClass?: string  // 外层容器样式
  boxClass?: string      // 勾选框样式
  labelClass?: string    // 文本样式
}

const props = withDefaults(defineProps<Props>(), {
  checked: false,
  label: ''
})
</script>

<template>
  <div class="flex items-center" :class="wrapperClass">
    <div
      class="border-[.125rem] rounded-[.25rem] border-[var(--color-white-100)] size-[var(--bc-checkbox-size)] relative center"
      :class="[checked && 'bg-brand border-brand check-mark', boxClass]">
      <BaseIcon v-if="checked" name="checkbox-check" class="text-[.625rem]" />
    </div>
    <div v-if="label" class="text-[.75rem] text-text-white-2 ml-[.25rem]" :class="labelClass">{{ label }}</div>
  </div>
</template>
<style>
:root {
  --bc-checkbox-size: 1rem;
}
</style>
<style lang="scss" scoped></style>
